@extends('app.base')

@section('page_title')
  注册
@endsection

@section('page_header')
  <link rel="stylesheet" href="/bower_components/AdminLTE/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="/bower_components/form.validation/dist/css/formValidation.min.css">
  <link rel="stylesheet" type="text/css" href="/bower_components/fancybox/dist/jquery.fancybox.min.css">
  <style>
.app {height:100%;}
  </style>
@endsection

@section('content')
  <div class="top-header">
    <h3>诗友注册</h3>
    <span class="go-back"><i class="fa fa-angle-left"></i></span>
  </div>
  <div class="content">
    <p class="bold-font">友情提示</p>
    <p>欢迎您注册天下诗苑诗友，请按如下内容填写您的信息，管理员将会在三个工作日内完成验证。</p>
    <div class="register-form">
      <form method="post">
        {{ csrf_field() }}
        <div class="form-group">
          <label for="account">会员名</label>
          <input class="form-control" type="text" id="username" name="username" placeholder="请输入您的会员名"
            @isset ($data)
              value="{{ $data['username'] }}"
            @endisset
          />
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input class="form-control" type="password" id="password" name="password" placeholder="请输入您的密码" />
        </div>
        <div class="form-group">
          <label for="re_password">再次确认密码</label>
          <input class="form-control" type="password" id="re_password" name="re_password" placeholder="请输入您的密码" />
        </div>
        <div class="form-group">
          <label for="email">邮箱</label>
          <input class="form-control" type="email" id="email" name="email" placeholder="请输入您的邮箱"
            @isset ($data)
              value="{{ $data['email'] }}"
            @endisset
          />
        </div>
        <div class="form-group">
          <label for="tel">手机号</label>
          <input class="form-control" type="tel" id="tel" name="tel" placeholder="请输入您的手机号" 
            @isset ($data)
              value="{{ $data['tel'] }}"
            @endisset
          />
        </div>
        <div class="form-group">
          <label>常住地</label>
          <div>
            <select class="form-control short-select" name="luo_pro">
              <option value="">省份</option>
            </select>
            <select class="form-control short-select" name="luo_city" style="float:right;margin-right:0;"></select>
          </div>
        </div>
        <div class="form-group clearfix">
          <label>职业类别</label>
          <div>
            <select class="form-control" name="job">
              <option value="选择行业">选择行业</option>
              <option value="高新科技">高新科技</option>
              <option value="互联网">&nbsp;&nbsp;&nbsp;互联网</option>
              <option value="电子商务">&nbsp;&nbsp;&nbsp;电子商务</option>
              <option value="电子游戏">&nbsp;&nbsp;&nbsp;电子游戏</option>
              <option value="计算机软件">&nbsp;&nbsp;&nbsp;计算机软件</option>
              <option value="计算机硬件">&nbsp;&nbsp;&nbsp;计算机硬件</option>
              <option value="信息传媒">信息传媒</option>
              <option value="出版业">&nbsp;&nbsp;&nbsp;出版业</option>
              <option value="电影录音">&nbsp;&nbsp;&nbsp;电影录音</option>
              <option value="广播电视">&nbsp;&nbsp;&nbsp;广播电视</option>
              <option value="通信">&nbsp;&nbsp;&nbsp;通信</option>
              <option value="金融">金融</option>
              <option value="银行">&nbsp;&nbsp;&nbsp;银行</option>
              <option value="资本投资">&nbsp;&nbsp;&nbsp;资本投资</option>
              <option value="证券投资">&nbsp;&nbsp;&nbsp;证券投资</option>
              <option value="保险">&nbsp;&nbsp;&nbsp;保险</option>
              <option value="信贷">&nbsp;&nbsp;&nbsp;信贷</option>
              <option value="财务">&nbsp;&nbsp;&nbsp;财务</option>
              <option value="审计">&nbsp;&nbsp;&nbsp;审计</option>
              <option value="服务业">服务业</option>
              <option value="法律">&nbsp;&nbsp;&nbsp;法律</option>
              <option value="餐饮">&nbsp;&nbsp;&nbsp;餐饮</option>
              <option value="酒店">&nbsp;&nbsp;&nbsp;酒店</option>
              <option value="旅游">&nbsp;&nbsp;&nbsp;旅游</option>
              <option value="广告">&nbsp;&nbsp;&nbsp;广告</option>
              <option value="公关">&nbsp;&nbsp;&nbsp;公关</option>
              <option value="景观">&nbsp;&nbsp;&nbsp;景观</option>
              <option value="咨询分析">&nbsp;&nbsp;&nbsp;咨询分析</option>
              <option value="市场推广">&nbsp;&nbsp;&nbsp;市场推广</option>
              <option value="人力资源">&nbsp;&nbsp;&nbsp;人力资源</option>
              <option value="社工服务">&nbsp;&nbsp;&nbsp;社工服务</option>
              <option value="养老服务">&nbsp;&nbsp;&nbsp;养老服务</option>
              <option value="教育">教育</option>
              <option value="高等教育">&nbsp;&nbsp;&nbsp;高等教育</option>
              <option value="基础教育">&nbsp;&nbsp;&nbsp;基础教育</option>
              <option value="职业教育">&nbsp;&nbsp;&nbsp;职业教育</option>
              <option value="幼儿教育">&nbsp;&nbsp;&nbsp;幼儿教育</option>
              <option value="特殊教育">&nbsp;&nbsp;&nbsp;特殊教育</option>
              <option value="培训">&nbsp;&nbsp;&nbsp;培训</option>
              <option value="医疗服务">医疗服务</option>
              <option value="临床医疗">&nbsp;&nbsp;&nbsp;临床医疗</option>
              <option value="制药">&nbsp;&nbsp;&nbsp;制药</option>
              <option value="保健">&nbsp;&nbsp;&nbsp;保健</option>
              <option value="美容">&nbsp;&nbsp;&nbsp;美容</option>
              <option value="医疗器材">&nbsp;&nbsp;&nbsp;医疗器材</option>
              <option value="生物工程">&nbsp;&nbsp;&nbsp;生物工程</option>
              <option value="疗养服务">&nbsp;&nbsp;&nbsp;疗养服务</option>
              <option value="护理服务">&nbsp;&nbsp;&nbsp;护理服务</option>
              <option value="艺术娱乐">艺术娱乐</option>
              <option value="创意艺术">&nbsp;&nbsp;&nbsp;创意艺术</option>
              <option value="体育健身">&nbsp;&nbsp;&nbsp;体育健身</option>
              <option value="娱乐休闲">&nbsp;&nbsp;&nbsp;娱乐休闲</option>
              <option value="图书馆">&nbsp;&nbsp;&nbsp;图书馆</option>
              <option value="博物馆">&nbsp;&nbsp;&nbsp;博物馆</option>
              <option value="策展">&nbsp;&nbsp;&nbsp;策展</option>
              <option value="博彩">&nbsp;&nbsp;&nbsp;博彩</option>
              <option value="制造加工">制造加工</option>
              <option value="食品饮料业">&nbsp;&nbsp;&nbsp;食品饮料业</option>
              <option value="纺织皮革业">&nbsp;&nbsp;&nbsp;纺织皮革业</option>
              <option value="服装业">&nbsp;&nbsp;&nbsp;服装业</option>
              <option value="烟草业">&nbsp;&nbsp;&nbsp;烟草业</option>
              <option value="造纸业">&nbsp;&nbsp;&nbsp;造纸业</option>
              <option value="印刷业">&nbsp;&nbsp;&nbsp;印刷业</option>
              <option value="化工业">&nbsp;&nbsp;&nbsp;化工业</option>
              <option value="汽车">&nbsp;&nbsp;&nbsp;汽车</option>
              <option value="家具">&nbsp;&nbsp;&nbsp;家具</option>
              <option value="电子电器">&nbsp;&nbsp;&nbsp;电子电器</option>
              <option value="机械设备">&nbsp;&nbsp;&nbsp;机械设备</option>
              <option value="塑料工业">&nbsp;&nbsp;&nbsp;塑料工业</option>
              <option value="金属加工">&nbsp;&nbsp;&nbsp;金属加工</option>
              <option value="军火">&nbsp;&nbsp;&nbsp;军火</option>
              <option value="地产建筑">地产建筑</option>
              <option value="房地产">&nbsp;&nbsp;&nbsp;房地产</option>
              <option value="装饰装潢">&nbsp;&nbsp;&nbsp;装饰装潢</option>
              <option value="物业服务">&nbsp;&nbsp;&nbsp;物业服务</option>
              <option value="特殊建造">&nbsp;&nbsp;&nbsp;特殊建造</option>
              <option value="建筑设备">&nbsp;&nbsp;&nbsp;建筑设备</option>
              <option value="贸易零售">贸易零售</option>
              <option value="零售">&nbsp;&nbsp;&nbsp;零售</option>
              <option value="大宗交易">&nbsp;&nbsp;&nbsp;大宗交易</option>
              <option value="进出口贸易">&nbsp;&nbsp;&nbsp;进出口贸易</option>
              <option value="公共服务">公共服务</option>
              <option value="政府">&nbsp;&nbsp;&nbsp;政府</option>
              <option value="国防军事">&nbsp;&nbsp;&nbsp;国防军事</option>
              <option value="航天">&nbsp;&nbsp;&nbsp;航天</option>
              <option value="科研">&nbsp;&nbsp;&nbsp;科研</option>
              <option value="给排水">&nbsp;&nbsp;&nbsp;给排水</option>
              <option value="水利能源">&nbsp;&nbsp;&nbsp;水利能源</option>
              <option value="电力电网">&nbsp;&nbsp;&nbsp;电力电网</option>
              <option value="公共管理">&nbsp;&nbsp;&nbsp;公共管理</option>
              <option value="环境保护">&nbsp;&nbsp;&nbsp;环境保护</option>
              <option value="非盈利组织">&nbsp;&nbsp;&nbsp;非盈利组织</option>
              <option value="开采冶金">开采冶金</option>
              <option value="煤炭工业">&nbsp;&nbsp;&nbsp;煤炭工业</option>
              <option value="石油工业">&nbsp;&nbsp;&nbsp;石油工业</option>
              <option value="黑色金属">&nbsp;&nbsp;&nbsp;黑色金属</option>
              <option value="有色金属">&nbsp;&nbsp;&nbsp;有色金属</option>
              <option value="土砂石开采">&nbsp;&nbsp;&nbsp;土砂石开采</option>
              <option value="地热开采">&nbsp;&nbsp;&nbsp;地热开采</option>
              <option value="交通仓储">交通仓储</option>
              <option value="邮政">&nbsp;&nbsp;&nbsp;邮政</option>
              <option value="物流递送">&nbsp;&nbsp;&nbsp;物流递送</option>
              <option value="地面运输">&nbsp;&nbsp;&nbsp;地面运输</option>
              <option value="铁路运输">&nbsp;&nbsp;&nbsp;铁路运输</option>
              <option value="管线运输">&nbsp;&nbsp;&nbsp;管线运输</option>
              <option value="航运业">&nbsp;&nbsp;&nbsp;航运业</option>
              <option value="民用航空业">&nbsp;&nbsp;&nbsp;民用航空业</option>
              <option value="农林牧渔">农林牧渔</option>
              <option value="种植业">&nbsp;&nbsp;&nbsp;种植业</option>
              <option value="畜牧养殖业">&nbsp;&nbsp;&nbsp;畜牧养殖业</option>
              <option value="林业">&nbsp;&nbsp;&nbsp;林业</option>
              <option value="渔业">&nbsp;&nbsp;&nbsp;渔业</option>
            </select>
          </div>
        </div>
        <div class="checkbox">
          <label><input type="checkbox" name="agree" value="agree" checked>同意社区规则</label><a href="/pages/info">《天下诗苑宣言》</a>|<a href="/pages/rule">《天下诗苑守则》</a>
        </div>
        <button type="submit" class="btn full-width-btn">注册</button>
      </form>
    </div>
  </div>
@endsection

@section('page_script')
  <script src="/bower_components/form.validation/dist/js/formValidation.js"></script>
  <script src="/bower_components/form.validation/dist/js/framework/bootstrap.min.js"></script>
  <script src="/bower_components/fancybox/dist/jquery.fancybox.min.js"></script>
  <script src="/js/city.js"></script>
  <script>
$(function(){
  for(var i=0;i<LUO_PRO.length;i++){
    $('select[name=luo_pro]').append('<option value="' + LUO_PRO[i] + '">' + LUO_PRO[i] + '</option>');
  }
  $('select[name=luo_pro]').on('change', function(e){
    var v = $(this).val();
    $('select[name=luo_city]').html('');
    if(v == '') return;
    var cities = LUO_CITY[v];
    for(var i=0;i<cities.length;i++){
      $('select[name=luo_city]').append('<option value="' + cities[i] + '">' + cities[i] + '</option>');
    }
  })

  @isset ($err)
    $.fancybox.open('<div class="message"><h2>提示!</h2><p>{{ $err }}</p></div>');
  @endisset

  @isset ($data)
    $('select[name=luo_pro]').val('{{ $data['luo_pro'] }}');
    $('select[name=luo_city]').append('<option value="{{ $data['luo_city' ]}}">{{ $data['luo_city'] }}</option>');
    $('select[name=job]').val('{{ $data['job'] }}');
  @endisset

  $('form').formValidation({
    framework: 'bootstrap',
    fields: {
      username: {
        validators: {
          notEmpty: {
            message: '请填写会员名'
          },
          regexp: {
            regexp: /^\w{4,10}$/,
            message: '会员名为4-10位英文或数字组合文字'
          }
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: '请填写密码'
          },
          stringLength:{
            min: 6,
            max: 15,
            message: '密码为6-15位'
          },
          regexp: {
            regexp: /^[a-zA-Z]+[a-zA-Z\d]+$/,
            message: '密码过于简单,请重新设置'
          }
        }
      },
      re_password: {
        validators: {
          notEmpty: {
            message: '请确认密码'
          },
          identical: {
            field: 'password',
            message: '两次密码不一致!'
          }
        }
      },
      email: {
        validators: {
          notEmpty: {
            message: '请填写邮箱'
          },
          emailAddress: {
            message: '请输入正确的邮箱!'
          }
        }
      },
      tel: {
        validators: {
          notEmpty: {
            message: '请填写手机号'
          },
          phone: {
            country: 'CN',
            message: '请输入正确的手机号'
          }
        }
      },
      luo_pro: {
        validators: {
          notEmpty: {
            message: '请选择省份!'
          }
        }
      },
      luo_city: {
        validators: {
          notEmpty: {
            message: '请选择地市!'
          }
        }
      },
      job: {
        validators: {
          callback: {
            callback: function(value, validator, $field) {
              return value != '选择行业';
            },
            message: '请选择行业!'
          }
        }
      }
    }
  })
})
  </script>
@endsection
